<template>
    <view class="container">
        <NavBar title="计量"  />
        <scroll-view class="form-content" scroll-y>
            <!-- 表单内容 -->
            <view class="form-list">
                <!-- 清单编号 -->
                <view class="form-item">
                    <text class="form-label">计量周期</text>
                    <view class="input-wrapper">
                        <view class="" @click="unitadd">
                        	<uv-text v-show="!name" suffixIcon="arrow-down-fill" iconStyle="font-size: 8px" text="请选择"></uv-text>
                        	<text v-show="name">{{name}}</text>
							
                        </view>
                    </view>
                </view>

                <!-- 清单名称 -->
                <view class="form-item">
                    <text class="form-label">台班数</text>
                    <view class="input-wrapper input-wrapper_unit">
                        <input class="form-input" type="number" @blur="blur('projectNum')" v-model="form.projectNum" placeholder="请输入"
                            />
						<view class="unit">
							{{unitText.split('/')[1]}}
						</view>
                    </view>
                </view>

                <!-- 计量单号 -->
                <view class="form-item">
                    <text class="form-label">油耗总量(L)</text>
                    <view class="input-wrapper input-wrapper_unit">
                        <input class="form-input" type="number" @blur="blur('oilNum')" v-model="form.oilNum" placeholder="请输入"
                             />
							 <view class="unit">
							 	L
							 </view>
                    </view>
                </view>
                <view class="form-item">
                    <text class="form-label">油耗总金额</text>
                    <view class="input-wrapper input-wrapper_unit">
                        <input class="form-input" type="number" @blur="blur('realityOil')" v-model="form.realityOil" placeholder="请输入" />
						<view class="unit">
							元
						</view>
                    </view>
                </view>
                <view class="form-item">
                    <text class="form-label">出场费</text>
                    <view class="input-wrapper input-wrapper_unit">
                        <input class="form-input" type="number" @blur="blur('entranceFee')" v-model="form.entranceFee" placeholder="请输入" />
						<view class="unit">
							元
						</view>
                    </view>
                </view>
                <view class="form-item">
                    <text class="form-label">进场费</text>
                    <view class="input-wrapper input-wrapper_unit">
                        <input class="form-input" type="number" @blur="blur('approachFee')" v-model="form.approachFee" placeholder="请输入" />
						<view class="unit">
							元
						</view>
                    </view>
                </view>

                <!-- 上限量 -->
                <view class="form-item">
                    <text class="form-label">修理费</text>
                    <view class="input-wrapper input-wrapper_unit">
                        <input class="form-input" type="number" @blur="blur('repairFee')" v-model="form.repairFee" placeholder="请输入" />
						<view class="unit">
							元
						</view>
                    </view>
                </view>

                <!-- 本期末量 -->
                <view class="form-item">
                    <text class="form-label">摊销比</text>
                    <view class="input-wrapper input-wrapper_unit">
                        <input class="form-input" type="number" @blur="blur('amortizationRate')" v-model="form.amortizationRate" placeholder="请输入" />
						<view class="unit">
							%
						</view>
                    </view>
                </view>

                <view class="submit-button">
                    <button class="submit-btn" @click="submitForm">提交</button>
                </view>
            </view>
        </scroll-view>
    </view>
	<view v-if="isShowcycle" class="picker-containers">
	  <view class="picker-masks" @click="closeOutPickercycle()"></view>
	  <view class="picker-contents">
	    <view class="picker-headers">
	      <text class="picker-cancels" @click="closeOutPickercycle()">取消</text>
	      <text class="picker-titles">选择计量周期</text>
	      <text class="picker-confirms" @click="confirmOutsupplier()">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-lists">
	      <view  class="picker-items" v-for="(item, index) in list"  :key="index" 
	            :class="{ 'selecteds': form.cycleId === item.id }"
	            @click="selectOutOptioncycle(item)">
	        <text>{{ item.cycleName }}</text>
	      </view>
		  <view class="black-boxs">
		  	
		  </view>
	    </scroll-view>
		
	  </view>
	</view>
</template>

<script>
import NavBar from '@/components/NavBar/index.vue'
import { getCyclemanagementList,othersb} from '@/utils/app.js'
export default {
    components: { NavBar },
    data() {
        return {
			list:[],
			isShowcycle:false,
			name:'',
			unitText:'',
            form: {
				cycleId:'',
				projectNum:'',
				oilNum:'',
				realityOil:'',
				entranceFee:'',
				approachFee:'',
				repairFee:'',
				amortizationRate:'',
				contractId:'',
				jlSource:1,
				jlType:2,
				sourceId:'',
				recordId:'',
				meteringNumbers:'',
				projectId:''
            },
			obj:{}
        }
    },
    onLoad(options) {
		console.log(options);
		this.unitText=options.unit
		this.obj=options
		this.form.recordId=options.recordId
		this.form.sourceId=options.sourceId
		this.form.contractId=options.contractId
		this.form.projectId=options.projectId
		this.getCyclemanagementLists(options)
    },
    methods: {
		closeOutPickercycle(){
			this.name = '',
			this.form.cycleId = ''
			this.isShowcycle = false
		},
		confirmOutsupplier(){
			this.isShowcycle = false
		},
		selectOutOptioncycle(item){
			this.name = item.cycleName
			this.form.cycleId = item.id
		},
		blur(e){
			if(this.form[e] < 0){
				this.form[e] = ''
				uni.showToast({
				    title: '只能输入大于0的数字',
				    icon: 'none'
				});
			}
		},
		getCyclemanagementLists(data){
			getCyclemanagementList(data).then(res=>{
				console.log(res);
				this.list=res.rows
			})
		},
		unitadd(){
			this.isShowcycle = true
			// const itemList = this.list.map(item => item.cycleName)
			// uni.showActionSheet({
			//     itemList,
			//     success: (res) => {
			//         const selected = this.list[res.tapIndex]
			//         // this.form.unit=
			// 		console.log(selected);
			// 		this.name=selected.cycleName
			// 		this.form.cycleId=selected.id
			//     }
			// })
		},
		submitForm(){
			if(!this.form.cycleId){
				return uni.showToast({
				    title: '请选择周期',
				    icon: 'none'
				});
			}
			if(!this.form.projectNum){
				return uni.showToast({
				    title: '请输入台班数',
				    icon: 'none'
				});
			}
			if(!this.form.oilNum){
				return uni.showToast({
				    title: '请输入油耗总量',
				    icon: 'none'
				});
			}
			if(!this.form.realityOil){
				return uni.showToast({
				    title: '请输入油耗金额',
				    icon: 'none'
				});
			}
			if(!this.form.entranceFee){
				return uni.showToast({
				    title: '请输入进场费',
				    icon: 'none'
				});
			}
			if(!this.form.repairFee){
				return uni.showToast({
				    title: '请输入修理费',
				    icon: 'none'
				});
			}
			if(!this.form.amortizationRate){
				return uni.showToast({
				    title: '请输入摊销比',
				    icon: 'none'
				});
			}
			this.form.recordId=this.obj.recordId
			this.form.sourceId=this.obj.sourceId
			this.form.contractId=this.obj.contractId
			this.form.meteringNumbers=this.generateOrderNumbers()
			console.log(this.form);
			othersb(this.form).then(res=>{
				if(res.code==200){
					uni.showToast({
					    title: '成功',
					    icon: 'none'
					});
					this.form={}
					this.name=''
					uni.navigateBack()
				}
			})
		},
		generateOrderNumbers() {
		      const now = new Date();
		      const year = now.getFullYear().toString().substr(-2);
		      const month = (now.getMonth() + 1).toString().padStart(2, '0');
		      const day = now.getDate().toString().padStart(2, '0');
		      const hour = now.getHours().toString().padStart(2, '0');
		      const minute = now.getMinutes().toString().padStart(2, '0');
		      const second = now.getSeconds().toString().padStart(2, '0');
		      const random = Math.floor(Math.random() * 10000)
		        .toString()
		        .padStart(4, '0');
		      return `TS_JG_SB_${year}${month}${day}${hour}${minute}${second}${random}`;
		    },
    }
}
</script>

<style lang="scss" scoped>
* {
    box-sizing: border-box;
}

.list {
    height: 1460rpx;
    padding: 0 30rpx;
    background-color: #fff;

    .list-item {
        display: flex;
        align-items: center;
        height: 112rpx;
        border-bottom: 1rpx solid #C9CDD4;

        .select {
            display: flex;
            align-items: center;
            padding-left: 28rpx;
        }

        .item-left {
            margin-right: 32rpx;
            width: 160rpx;
        }

        .item-right {
            flex: 1;
        }

        .input {
            border: 0;
        }
    }
}


.form-content {
    flex: 1;
}

.form-list {
    flex-direction: column;
}

.form-item {
    display: flex;
    flex-direction: row;
    padding: 0 16px;
    border-bottom-width: 0.5px;
    border-bottom-color: #EEEEEE;
    border-bottom-style: solid;
    width: 359px;
    height: 56px;
    align-self: center;
    align-items: center;
}

.form-label {
    width: 180rpx;
    height: 24px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.9);
    line-height: 24px;
}

.form-input {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    height: 56px;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
}

.input-wrapper {
    flex: 1;
    margin-left: 16px;
    max-width: 450rpx;
    width: 450rpx;

    :deep(.uni-input-input) {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
.input-wrapper_unit{
	display: flex;
	align-items: center;
	.unit{
		width: 170rpx;
		font-size: 14px;
		color: #808080;
	}
}

.placeholder {
    width: 100%;
    color: rgba(29, 33, 41, 0.65);
}

.submit-button {
    padding: 0 30px;
    margin-top: 80rpx;
    margin-bottom: 20px;
    width: 100%;
}

.submit-btn {
    height: 44px;
    border-radius: 22px;
    font-size: 16px;
    color: #4980FF;
    background-color: #F0F5FF;
    border-width: 0;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    width: 100%;
}
/* 修改底部弹出层部分 */
		.picker-containers {
		  position: fixed;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  top: 0;
		  z-index: 11000;
		}
		
		.picker-masks {
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: rgba(0, 0, 0, 0.4);
		}
		
		.picker-contents {
		  position: absolute;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  height: 500rpx;
		  background-color: #FFFFFF;
		  border-top-left-radius: 16px;
		  border-top-right-radius: 16px;
		}
		
		.picker-headers {
		  display: flex;
		  height: 53px;
		  flex-direction: row;
		  justify-content: space-between;
		  align-items: center;
		  padding: 0 16px;
		  border-bottom-width: 1px;
		  border-bottom-color: #EEF2F9;
		  margin-bottom: 30rpx;
		}
		
		.picker-titles {
		  font-size: 16px;
		  color: #1D2129;
		  font-weight: 400;
		}
		
		.picker-cancels, .picker-confirms {
		  font-size: 16px;
		}
		
		.picker-cancels {
		  color: #86909C;
		}
		
		.picker-confirms {
		  color: #165DFF;
		}
		
		.picker-lists {
		  padding: 24rpx 0;
		  max-height: 350rpx;
		  /* overflow: scroll; */
		}
		
		.picker-items {
			display: flex;
		  height: 44px;
		  flex-direction: row;
		  justify-content: center;
		  align-items: center;
		  padding: 0 16px;
		  overflow: hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		}
		.selecteds{
			background-color: #E8F3FF;
		}
		.black-boxs{
			height: 50rpx;
		}
		.picker-items text {
		  font-size: 16px;
		  color: #1D2129;
		}
</style>
